// ck-editor 编译配置
// https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/frameworks/vuejs-v3.html#configuring-vueconfigjs

/* eslint-disable @typescript-eslint/no-var-requires */
const path = require('path')
const CKEditorWebpackPlugin = require('@ckeditor/ckeditor5-dev-webpack-plugin')
const { styles } = require('@ckeditor/ckeditor5-dev-utils')

module.exports = {
  publicPath: process.env.BASE_URL,
  /*
  * CKEditor 的源码是 ES6
  * 默认情况下，node_modules 目录下的 代码 不会被编译
  * 所以必须明确告诉 vue-cli 打包 CKEditor源码
  * */
  transpileDependencies: [
    /ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/
  ],

  configureWebpack: {
    plugins: [
      /*
      * CKEditor Webpack 插件
      * 文档 https://github.com/ckeditor/ckeditor5-dev/tree/master/packages/ckeditor5-dev-webpack-plugin
      * 用于处理语言包
      * */
      new CKEditorWebpackPlugin({
        // 默认语言
        language: 'zh-cn',

        // 附加的语言包
        additionalLanguages: ['en'],

        // 语言包输出目录
        outputDirectory: process.env.VUE_APP_LANGUAGET_FILE_PATH,

        // ? 设置为 时true，所有生成的资产（包）将包括主要语言的翻译
        addMainLanguageTranslationsToAllAssets: true,

        /*
        * 处理自定义插件的语言包
        * 需要同时在 packageNamesPattern 和 sourceFilesPattern 中添加 匹配正则
        * 下方配置添加了 src/components/editor/plugins/table-cell-background-color 插件的语言包（.po文件为语言包）
        * */

        // ? 用于确定包是否在<package_name>/lang/translations目录中包含翻译（PO 文件）的模式
        // 默认值 - /[/\\]ckeditor5-[^/\\]+[/\\]/
        packageNamesPattern: /([/\\]ckeditor5-[^/\\]+[/\\])|(src[/\\]components[/\\]editor[/\\]plugins[/\\]table-cell-background-color[/\\])/,

        // ? 用于确定文件是否可能包含要翻译的消息的模式
        // 默认值 - /[/\\]ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$/
        sourceFilesPattern: /([/\\]ckeditor5-[^/\\]+[/\\]src[/\\].+\.js$)|(src[/\\]components[/\\]editor[/\\]plugins[/\\]table-cell-background-color[/\\].+\.js$)/ // 默认值

        // 当设置为 时true，它会在发生错误时停止 webpack 编译
        // strict: false, // 默认值

        // 设置为 时true，它会记录编译期间发现的所有警告
        // verbose: false, // 默认值

        // ? 设置为 true 时，所有翻译将输出到 outputDirectory 选项指定的目录
        // buildAllTranslationsToSeparateFiles: false, // 默认值

        // ? 允许指定所有翻译将输出到的目标文件的选项。此选项支持字符串、正则表达式和函数。如果不存在具有该名称的资产，它将自动创建并填充翻译
        // translationsOutputFile: undefined,

        // ? 设置为 true 时，ckeditor5-core包中的所有翻译都将添加到包文件中
        // includeCorePackageTranslations: false, // 默认值

        // ? 当设置为 true 时，getPluralForm()函数（如果指定语言存在）将不会被添加到包文件中
        // skipPluralFormFunction: false, // 默认值

        // ? (内部）用于从 corePackageSampleResourcePath 获取核心翻译包路径的模式，其中包含主要翻译
        // corePackagePattern: /[/\\]ckeditor5-core/, // 默认值

        // ? （内部）ckeditor5-core包的示例路径。对此文件的测试导入显示ckeditor5-core包是否可用，并允许首先加载核心包翻译
        // corePackageSampleResourcePath: '@ckeditor/ckeditor5-core/src/editor/editor.js', // 默认值

        // ? （内部）ckeditor5-core 包中的 context.json 文件的路径。如果 includeCorePackageTranslations 选项设置为 true，则使用它
        // corePackageContextsResourcePath: '@ckeditor/ckeditor5-core/lang/contexts.json' // 默认值
      })
    ]
  },

  /*
  * Vue CLI 通常会使用它自己的加载器来加载 .svg 和 .css 文件，但是：
  * 1. CKEditor 使用的图标必须使用 raw-loader 加载，
  * 2. CKEditor 使用的 CSS 必须使用 PostCSS 进行转换才能正确加载。
  * */
  chainWebpack: (config) => {
    // (1.) 要处理编辑器图标，首先获取 *.svg 文件的默认规则
    const svgRule = config.module.rule('svg')

    /*
    * 然后你可以：
    * 清除现有 'svg' 规则的所有加载器：svgRule.uses.clear();
    * 或从 node_modules 中排除 ckeditor 目录
    * */
    svgRule.exclude.add(path.join(__dirname, 'node_modules', '@ckeditor'))
      // 排除 自定义插件中 svg 图标
      .add(path.join(__dirname, 'src/components/editor/plugins'))

    /*
    * 为属于 CKEditor 的 *.svg 文件添加一个 loader。您可以：
    * 修改现有的 'svg' 规则：svgRule.use( 'raw-loader' ).loader( 'raw-loader' );
    * 或添加一个新的：
    * */
    config.module
      .rule('cke-svg')
      .test([
        /ckeditor5-[^/\\]+[/\\]theme[/\\]icons[/\\][^/\\]+\.svg$/,
        // 匹配自定义插件中 svg 图标
        /src[/\\]components[/\\]editor[/\\]plugins[/\\].+[^/\\]+\.svg$/
      ])
      .use('raw-loader')
      .loader('raw-loader')

    /*
    * (2.) 使用 PostCSS 转换编辑器导入的 .css 文件。
    * 确保只有属于 ckeditor5-* 包的 CSS 以这种方式处理。
    * */
    config.module
      .rule('cke-css')
      .test(/ckeditor5-[^/\\]+[/\\].+\.css$/)
      .use('postcss-loader')
      .loader('postcss-loader')
      .tap(() => styles.getPostCssConfig({
        themeImporter: {
          themePath: require.resolve('@ckeditor/ckeditor5-theme-lark')
        },
        minify: true
      }))
  },

  css: {
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  }
}
